<template>
	<u-popup :show="showPopup" :customStyle="{width: '90%', 'max-height': '90%'}" mode="center" round="12" @close="cancel">
		<view class="p-4">
			<view v-if="title" class="" v-html="title"></view>
			<view class="pt-4">
				<view v-if="!options||options.length == 0" class="text-center text-gray-300">
					无可选项
				</view>
				<u-checkbox-group v-model="cvalue" @change="checkBoxClick" iconPlacement="right"
					placement="column" activeColor="#2d58cb">
					<u-checkbox v-for="(option,i) in options" :key="i" :label="option[labelKey]" :name="valueKey?option[valueKey]:option"
						:customStyle="{marginBottom: '16px'}"></u-checkbox>
				</u-checkbox-group>
			</view>
			<view v-if="multiple" class="flex bg-white">
				<view class="flex-1 py-3 text-center active:bg-gray-200" @click="cancel">
					取消
				</view>
				<view class="flex-1 py-3 text-red-500 text-center border-l active:bg-gray-200" @click="confirm">
					确定
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
export default {
    props:{
        title: {
            type: String,
            default: '请选择'
        },
        multiple: {
            type: Boolean,
            default: false
        },
        options:{
            type: Array,
            default: function(){
                return [];
            }
        },
        labelKey: {
            type: String,
            default: 'label'
        },
        // 指定 data item 中那个属性作为value
        valueKey: {
            type: String,
            default: 'value'
        },
        value: {
            type: Boolean,
            default: false
        },
        result: {
            type: [String,Array],
            default: function(){
                return [];
            }
        }
    },
    data() {
        return {
            showPopup: false,
            cvalue: []
        }
    },
    created(){
        this.changeResult();
    },
    methods:{
        confirm(){
            let label = '',arr = this.options.filter(t=>{
                return this.cvalue.includes(this.valueKey?t[this.valueKey]:t)
            })
            for (const option of arr) {
                label+=label?','+option[this.labelKey]:option[this.labelKey]
            }
			this.$emit('input', false)
            this.$emit('confirm', this.multiple?this.cvalue:this.cvalue[0], label);
        },
        cancel(){
            this.$emit('input', false)
            this.$emit('cancel');
        },
        checkBoxClick(t){
            if (!this.multiple) {
				this.cvalue = t.filter(item=>!this.cvalue.includes(item))
				this.confirm();
            }
        },
        changeResult(){
            if (this.result instanceof Array) {
                this.cvalue = this.result;
            } else {
                this.cvalue = [this.result];
            }
        }
    },
    watch:{
        value(){
            const v = this;
            v.showPopup = v.value;
        },
        showPopup(){
            this.$emit('input', this.showPopup);
        },
        result(){
            this.changeResult();
        }
    }
}
</script>
